<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../重置样式表/reset.css">
    <link rel="stylesheet" href="./less/index.css">
</head>
<body>
<header class="top-bar">
    <div class="menu-btn">
        <a href="#">
            <i class="iconfont">&#xe65a;</i>
        </a>
    </div>
    <h1 class="logo">
        <a href="#">I Learn</a>
    </h1>
    <div class="search">
        <a href="#">
            <i class="iconfont">&#xe63f;</i>
        </a>
    </div>
</header>
<div class="banner">
    <a href="#">
        <img src="./public/banner.png" alt="">
    </a>
</div>
<nav class="menu">
    <a href="#" class="courses">
        <i class="iconfont">&#xe63b;</i>
        My Courses
    </a>
    <a href="#" class="teacher">
        <i class="iconfont">&#xe66b;</i>
        Star Teacher</a>
    <a href="#" class="script">
        <i class="iconfont">&#xe669;</i>
        Subscription</a>
    <a href="#" class=" download">
        <i class="iconfont">&#xe645;</i>
        My Download</a>
</nav>
<div class="course-list">
    <div class="title">
        <h2>Latest course</h2>
        <a class="more" href="#">more+</a>
    </div>
    <div class="item-list">
        <div class="item">
<!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
<!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
        <div class="item">
            <!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
            <!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
        <div class="item">
            <!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
            <!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
        <div class="item">
            <!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
            <!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
    </div>
</div>
<div class="course-list">
    <div class="title">
        <h2>Latest course</h2>
        <a class="more" href="#">more+</a>
    </div>
    <div class="item-list">
        <div class="item">
            <!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
            <!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
        <div class="item">
            <!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
            <!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
        <div class="item">
            <!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
            <!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
        <div class="item">
            <!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
            <!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
    </div>
</div>
<div class="course-list">
    <div class="title">
        <h2>Latest course</h2>
        <a class="more" href="#">more+</a>
    </div>
    <div class="item-list">
        <div class="item">
            <!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
            <!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
        <div class="item">
            <!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
            <!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
        <div class="item">
            <!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
            <!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
        <div class="item">
            <!--            封面-->
            <div class="cover">
                <img src="./public/cover.png" alt="">
            </div>
            <h3 class="course-title">
                Photography course
            </h3>
            <!--            用户信息-->
            <div class="user-info">
                <div class="avatar">
                    <img src="./public/avatar.png" alt="">
                </div>
                <div class="nickname">Annabelle</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
